<template>
	<view class="page">
		<!-- 顶部北京图片 -->
		<view class="business_img" :style="'background: url('+fengcai+') center center no-repeat;'"></view>
		<view class="page_content" :style="'padding-top:'+ touHeight +'px;'">
			<!-- 更换图片 -->
			<view class="business_text" :style="'height:'+ touHeight +'px'">
				<view class="replace" @tap="toReplace"><image :src="URL+'/JD_wx_img/replace_img.png'" mode="widthFix"></image>更换风采图</view>
			</view>
			<view class="business_top">
				<view class="panel_top">
					<view class="name">{{name}}</view>
					<view class="renzheng">已认证</view>
				</view>
				<view class="ziliao" @tap="toJiudianziliao">酒店资料</view>
				<view class="swith_user" @tap="toswithUser"><image :src="URL+'/JD_wx_img/swith_img.png'" mode="widthFix"></image>切换到用户版</view>
			</view>
			<view class="caozuo_btn">
				<view class="caozuo_list" @tap="toBaoming">
					<view class="caozuo_box">
						<image :src="URL+'/JD_wx_img/caozuo_btn_img01.png'" mode="widthFix"></image>
						<view class="text">筛选报名</view>
					</view>
				</view>
				<view class="caozuo_list" @tap="toHexiaodaka">
					<view class="caozuo_box">
						<image :src="URL+'/JD_wx_img/caozuo_btn_img02.png'" mode="widthFix"></image>
						<view class="text">核销打卡</view>
					</view>
				</view>
				<view class="caozuo_list" @tap="toShunyanyonggong">
					<view class="caozuo_box">
						<image :src="URL+'/JD_wx_img/caozuo_btn_img03.png'" mode="widthFix"></image>
						<view class="text">顺延用工</view>
					</view>
				</view>
				<view class="clear"></view>
			</view>
			<view class="work_dingdan">
				<view class="work_top">
					<view class="name">我的用工订单</view>
					<view class="drawal" @tap="toOrder">查看全部订单</view>
				</view>
				<view class="dingdan_list" v-for="item in orderList" :data-id="item.id" @tap="toDetails">
					<view class="list_top">
						<view class="name">{{item.type_text}}</view>
						<view class="state" :class="item.status==2?'state01':'state02'">{{item.status_text}}</view>
					</view>
					<view class="dingdan_time">
						<view class="time_left"><image :src="URL+'/JD_wx_img/xinxi_img01.png'" mode="widthFix"></image>{{item.arrival}}</view>
						<view class="renshu">
							<view class="renshu_top"><view class="hong">{{item.now}}</view>/{{item.sum}}人</view>
							<view class="gundong"><view class="jindu" :style="'width:' +item.speed"></view></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公共导航部分 -->
		<view class="tarbar">
			<view class="nav_link" @click="gotoIndex">
				<view class="icon icon_1"></view>
				<text class="text">首页</text>
			</view>
			<view class="nav_link on_cor" @click="gotoMy">
				<view class="icon icon_2"></view>
				<text class="text">我的</text>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data(){
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				orderList: [],
				fengcai:'',//酒店风采图
				name:''//酒店名称
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			
			//商家中心接口
			uni.request({
				url: app.globalData.URL + '/api/v1/Hotel/real',
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res) {
					that.id = res.data.data.id//酒店id
					that.fengcai = res.data.data.image_//酒店风采图
					that.name = res.data.data.name//酒店名称
					//酒店中心的兼职列表
					uni.request({
						url: app.globalData.URL + '/api/v1/Hotel/job?id='+that.id,
						method: "get",
						header:{
							token: uni.getStorageSync('token')
						},
						success: function (res) {
							that.orderList = res.data.data
						}
					})
				}
			})
		},
		methods:{
			
			// 页面底部跳转
			gotoIndex:function(){
				uni.showModal({
					title: '提示',
					content: '开发中，敬请期待！',
					showCancel: false,
					confirmColor:'#E85426',
				})
			},
			gotoMy:function(){
				uni.redirectTo({
				    url: '/pages/user_my_center/user_my_center',
				});
			},
			
			//跳转到酒店资料
			toJiudianziliao(){
				uni.navigateTo({
				    url: 'jiudian_jieshao/jiudian_jieshao',
				})
			},
			
			//跳转到订单列表
			toOrder(e){
				var that = this;
				var id = that.id;
				uni.navigateTo({
				    url: '/pages/yonggong_list/yonggong_list?id='+id,
				})
			},
			
			//跳转到筛选报名
			toBaoming(e){
				var that = this;
				var id = that.id
				uni.navigateTo({
				    url: '/pages/business_my_center/shaixuan_baoming/shaixuan_baoming?id='+id,
				})
			},
			
			//跳转到核销打卡
			toHexiaodaka(e){
				var that = this;
				var id = that.id
				uni.navigateTo({
				    url: '/pages/business_my_center/hexiao_daka/hexiao_daka?id='+id,
				})
			},
			
			//跳转到顺延用工
			toShunyanyonggong(e){
				var that = this;
				var id = that.id
				uni.navigateTo({
				    url: '/pages/business_my_center/shunyan_yonggong/shunyan_yonggong?id='+id,
				})
			},
			
			//跳转到详情
			toDetails(e){
				var that = this;
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
				    url: '/pages/yonggong_list/yonggong_xiangqing/yonggong_xiangqing?id='+id,
				})
			},
			
			//跳转到个人主页
			toswithUser(e){
				uni.navigateTo({
				    url: '/pages/user_my_center/user_my_center',
				})
			},
			//end
			//上传图片开始
			toReplace: function(e){
			    var that = this;
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						var tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.URL + '/api/v1/File/upload',
							header:{
								"Content-Type": "multipart/form-data",
								token: uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success (res){
								var list = JSON.parse(res.data)
								var image = list.data.url
								that.fengcai = tempFilePaths
								uni.request({
									url: app.globalData.URL + '/api/v1/Hotel/replace?image='+image,
									header:{
										token: uni.getStorageSync('token')
									},
									success (res){
										if(res.data.code==1){
											that.fengcai = res.data.data.image_
											wx.showToast({
											  title: res.data.msg,
											  icon: 'success',
											  duration: 1000
											})
										}else{
											wx.showToast({
											  title: res.data.msg,
											  icon: 'success',
											  duration: 1000
											})
										}
									}
								})
							}
						})
					},
				});
			},
		}
	}
</script>

<style>
	.page_content{
		position: relative;
		z-index: 10;
	}
	.business_img{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		border-radius: 0px 0px 32rpx 32rpx;
		height: 400rpx;
		background-size: cover!important;
	}
	.business_text{
		position: absolute;
		top: 0px;
		left: 30rpx;
		width: 300rpx;
	}
	.business_text .replace{
		font-size: 24rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 0px;
		left: 0px;
		height: 80rpx;
		line-height: 80rpx;
	}
	.business_text .replace image{
		width: 32rpx;
		display: inline-block;
		position: relative;
		top: 6rpx;
		margin-right: 5rpx;
	}
	.business_top{
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		border-radius: 32rpx;
		position: relative;
		margin-top: 180rpx;
	}
	.business_top .panel_top{
		padding: 30rpx;
	}
	.business_top .panel_top .name{
		font-weight: 900;
		font-size: 34rpx;
		color: #333333;
	}
	.business_top .panel_top .renzheng{
		width: 104rpx;
		text-align: center;
		height: 48rpx;
		line-height: 48rpx;
		background: linear-gradient(180deg, #5D9FF8 0%, #5DD2F8 100%);
		border-radius: 24rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
	.business_top .ziliao{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #333333;
		padding-left: 90rpx;
		border-top: 2rpx solid #EEEEEE;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jiu_name_img03.png) left 30rpx center no-repeat;
		background-size: 48rpx 48rpx;
		position: relative;
	}
	.business_top .ziliao:after{
		content: '';
		width: 32rpx;
		height: 32rpx;
		display: block;
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -16rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/sanjiao_img3.png) center center no-repeat;
	}
	.swith_user{
		width: 218rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #E85426;
		border-radius: 50rpx 50rpx 0rpx 50rpx;
		text-align: center;
		position: absolute;
		right: 0px;
		top: -32rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.swith_user image{
		width: 24rpx;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top: -2rpx;
		margin-right: 10rpx;
	}
	.caozuo_btn{
		margin-top: 30rpx;
	}
	.caozuo_list{
		float: left;
		width: 33.3333%;
		box-sizing: border-box;
		padding: 0px 16rpx;
	}
	.caozuo_list .caozuo_box{
		background: #fff;
		height: 186rpx;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		border-radius: 16px;
	}
	.caozuo_list .caozuo_box image{
		display: block;
		width: 72rpx;
		margin: 0px auto;
		padding-top: 30rpx;
	}
	.caozuo_list .caozuo_box .text{
		text-align: center;
		font-size: 24rpx;
		text-align: center;
		color: #333333;
		margin-top: 15rpx;
	}
	.work_top .drawal{
		margin-top: 0px;
	}
	.dingdan_list{
		border-bottom: 2rpx solid #eee;
	}
</style>
